﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>内容管理</title>
    <link rel="stylesheet" href="~/lib/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="~/css/icon/iconfont.css">
    <link rel="stylesheet" href="~/css/default/style.css">
</head>

<body class="mainbody">
    <div id="app" v-cloak>
        <div class="location">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>
                    <i class="iconfont icon-home"></i>
                    管理中心
                </el-breadcrumb-item>
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>内容管理</el-breadcrumb-item>
                <el-breadcrumb-item>内容管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="toolbar-box" :style="heightToolsBar">
            <div class="list-box">
                <div class="l-list">
                    <el-button-group>
                        <el-button icon="el-icon-plus" @@click="linkUrl('/article/articleedit')">新增</el-button>
                        <el-button icon="el-icon-s-check" @@click="auditCheckAll">审核</el-button>
                        <el-button icon="el-icon-delete" @@click="deleteCheckAll">删除</el-button>
                        <el-button icon="el-icon-circle-check" v-if="showImgList" @@click="toggleCheckAll">
                            <template v-if="!checkAll">
                                全选
                            </template>
                            <template v-else>
                                取消
                            </template>
                        </el-button>
                    </el-button-group>
                </div>
                <div class="r-list">
                    <div class="search-box">
                        <el-input placeholder="输入关健字" v-model="keyword">
                            <el-button slot="append" icon="el-icon-search" @@click="getPageList"></el-button>
                        </el-input>
                    </div>
                    <div class="btn-box">
                        <el-button-group>
                            <el-button :icon="iconImgList" @@click="toggleImgList"></el-button>
                            <el-button :icon="iconToolsBar" @@click="toggleToolsBar"></el-button>
                        </el-button-group>
                    </div>
                </div>
            </div>

            <div class="more-box">
                <dl>
                    <dt>分类筛选</dt>
                    <dd>
                        <dt-dropdown-select v-model="categoryId" :disabled="-1" :data="treeCategoryList" placeholder="请选择父类"></dt-dropdown-select>
                    </dd>
                </dl>
                <dl>
                    <dt>标签筛选</dt>
                    <dd>
                        <el-select v-model="labelId" placeholder="请选择...">
                            <el-option key="0" label="不限标签" :value="0"></el-option>
                            <el-option v-for="item in articleLabels"
                                       :key="item.id"
                                       :label="item.title"
                                       :value="item.id">
                            </el-option>
                        </el-select>
                    </dd>
                </dl>
                <dl>
                    <dt>发布日期</dt>
                    <dd>
                        <el-date-picker style="width:280px" v-model="dateRange"
                                        type="daterange"
                                        value-format="yyyy-MM-dd"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        @@change="handleChange">
                        </el-date-picker>
                    </dd>
                </dl>
            </div>

        </div>

        <div class="content-box">
            <div v-show="showImgList" class="table-card">
                <!--图片列表-->
                <div class="img-list" v-loading="loading" v-show="showImgList">
                    <el-card v-if="listData.length==0" class="nodata">暂无数据</el-card>
                    <el-card v-for="(item,index) in listData" :key="index">
                        <div class="check">
                            <el-checkbox v-model="item.checked"></el-checkbox>
                        </div>
                        <el-image lazy class="pic" fit="cover" :src="loadImage(item.imgUrl)" :preview-src-list="[loadImage(item.imgUrl)]">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                        <i class="absbg"></i>
                        <h1>
                            <span><a href="javascript:;" @@click="linkUrl('/article/articleedit?id='+item.id)">{{item.title}}</a></span>
                        </h1>
                        <div class="remark">
                            <span>{{item.zhaiyao}}</span>
                        </div>
                        <div class="tools">
                            <el-tag size="small" v-for="(citem,i) in item.categoryTitle.split(',')"
                                    :key="citem.index">
                                {{ citem }}
                            </el-tag>
                        </div>
                        <div class="foot">
                            <p class="time">{{item.addTime}}</p>
                            <span>
                                <el-link :underline="false" title="复制" icon="el-icon-document-copy" @@click="linkUrl('/article/articleedit?copyId='+item.id)"></el-link>
                                <el-link :underline="false" title="编辑" icon="el-icon-edit-outline" @@click="linkUrl('/article/articleedit?id='+item.id)"></el-link>
                                <el-link :underline="false" title="删除" icon="el-icon-delete" @@click="deleteItem(item.id)"></el-link>
                            </span>
                        </div>
                    </el-card>
                </div>
                
            </div>

            <el-card v-show="!showImgList" class="table-card">
                <!--文字列表-->
                <el-table ref="multipleTable" v-loading="loading" :data="listData" stripe class="table-list" @@selection-change="handleSelectionChange" @@select-all="handleSelectAll" @@select="handleSelect">
                    <el-table-column type="selection" width="45"></el-table-column>
                    <el-table-column prop="title" label="标题" min-width="180" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-image class="pic" fit="cover" :src="loadImage(scope.row.imgUrl)" :preview-src-list="[loadImage(scope.row.imgUrl)]">
                                <div slot="error" class="image-slot">
                                    <i class="el-icon-picture-outline"></i>
                                </div>
                            </el-image>
                            <h4>{{scope.row.title}}</h4>
                            <span class="date">
                                <i class="el-icon-time"></i>
                                {{scope.row.addTime}}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="categoryTitle" label="所属类别" min-width="160">
                        <template slot-scope="scope">
                            <div class="nowrap">
                                <el-tag size="small" v-for="(item,index) in scope.row.categoryTitle.split(',')"
                                        :key="item.index">
                                    {{ item }}
                                </el-tag>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="80" align="center">
                        <template slot-scope="scope">
                            <el-tag size="small" type="success" effect="dark" v-if="scope.row.status==0">正常</el-tag>
                            <el-tag size="small" type="warning" effect="dark" v-else-if="scope.row.status==1">待审</el-tag>
                            <el-tag size="small" type="warning" effect="dark" v-else-if="scope.row.status==2">已删</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sortId" label="排序"></el-table-column>
                    <el-table-column fixed="right" label="操作" width="130">
                        <template slot-scope="scope">
                            <el-button size="mini" icon="el-icon-document-copy" @@click="linkUrl('/article/articleedit?copyId='+item.id)"></el-button>
                            <el-button size="mini" icon="el-icon-edit" @@click="linkUrl('/article/articleedit?id='+scope.row.id)"></el-button>
                            <el-button size="mini" type="danger" icon="el-icon-delete" @@click="deleteItem(scope.row.id)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>

            <div class="pager-box">
                <el-pagination background
                               @@size-change="handleSizeChange"
                               @@current-change="handleCurrentChange"
                               :current-page="pageIndex"
                               :page-sizes="[10, 20, 50, 100]"
                               :page-size="pageSize"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="totalCount">
                </el-pagination>
            </div>
        </div>
    </div>

    <script src="~/lib/vue/vue.js"></script>
    <script src="~/lib/element-ui/index.js"></script>
    <script src="~/lib/axios/axios.min.js"></script>
    <script src="~/lib/babel-polyfill/polyfill.min.js"></script>
    <script src="~/js/axios.config.js"></script>
    <script src="~/js/tree.component.js"></script>
    <script>
        //初始化VUE
        var vm = new Vue({
            el: '#app',
            data: {
                loading: false,
                keyword: '', //查询关健字
                showToolsBar: false, //显示更多条件选项
                showImgList: true, //显示图片列表
                checkAll: false, //是否已全选
                heightToolsBar: 'height:60px',
                iconToolsBar: 'iconfont icon-d-arrow-down', //更多按钮图标
                iconImgList: 'iconfont icon-list-txt',//切换按钮图标
                totalCount: 0,
                pageSize: 10,
                pageIndex: 1,
                listData: [],
                channelId: 0,
                dateRange: '',
                categoryId: 0,
                treeCategoryList: [],//栏目列表
                labelId: 0,
                articleLabels: [],
                startDate: '',
                endDate: '',
                checkAll: false,
                //listSwitch: false,//列表切换,
                sysconfig: [],
            },
            methods: {
                //加载数据
                initData: function () {
                    let _this = this;
                    _this.channelId = GetQueryValue("channelId"); //获取channelId
                    new Promise(resolve => {
                        AxiosAjax({
                            url: `/client/setting/sysconfig`,
                            loading: false,
                            success: function (res) {
                                _this.sysconfig = res.data;
                                resolve('ok');
                            }
                        });
                    }).then(val => {
                        return new Promise(resolve => {
                            //加载分类列表
                            AxiosAjax({
                                url: `/article/category/${_this.channelId}`,
                                loading: false,
                                success: function (res) {
                                    let data = [{ id: 0, parentId: -1, title: '无父级', children: res.data }];
                                    _this.treeCategoryList = data;
                                }
                            });
                            //加载标签
                            AxiosAjax({
                                url: `/article/label/view/${_this.channelId}/1000?status=0`,
                                loading: false,
                                success: function (res) {
                                    _this.articleLabels = res.data;
                                }
                            });
                            resolve('ok');
                        });

                    }).then(val => {
                        //获取分页数据
                        _this.getPageList();
                    });
                },
                //获得分页数据
                getPageList() {
                    let _this = this;
                    let sendUrl = `/article/${_this.channelId}?pageSize=${_this.pageSize}&pageIndex=${_this.pageIndex}`;
                    if (_this.keyword.length > 0) {
                        sendUrl += "&keyword=" + encodeURI(_this.keyword);
                    }
                    sendUrl += `&categoryId=${_this.categoryId}`;
                    sendUrl += `&labelId=${_this.labelId}`;
                    if (Array.isArray(_this.dateRange)) {
                        if (_this.dateRange.length == 2) {
                            sendUrl += "&startDate=" + encodeURI(_this.dateRange[0]);
                            sendUrl += "&endDate=" + encodeURI(_this.dateRange[1]);
                        }
                    }
                    AxiosAjax({
                        url: sendUrl,
                        beforeSend: function () {
                            _this.loading = true
                        },
                        success: function (res) {
                            _this.listData = res.data;
                            let pageInfo = JSON.parse(res.headers["x-pagination"]);
                            _this.totalCount = pageInfo.totalCount;
                            _this.pageSize = pageInfo.pageSize;
                            _this.pageIndex = pageInfo.pageIndex;
                            _this.listData.forEach(row => {
                                //取消全选按钮的选中状态
                                _this.checkAll = false;
                                /*if (row.imgUrl) {
                                    row.imgUrl = _this.sysconfig.fileServer + row.imgUrl;
                                }*/
                            });
                        },
                        error: function (err) {
                            _this.listData = [];
                        },
                        complete: function () {
                            _this.loading = false
                        }
                    });
                },
                //加载图片地址
                loadImage: function (src) {
                    return baseApi + src
                },
                //跳转链接
                linkUrl: function (url) {
                    //console.log(url);
                    let _this = this;
                    if (url.indexOf('?') >= 0) {
                        url = url + '&channelId=' + _this.channelId;
                    } else {
                        url = url + '?channelId=' + _this.channelId;
                    }
                    window.location.href = url;
                },
                //切换更多查询条件
                toggleToolsBar: function () {
                    this.showToolsBar = !this.showToolsBar
                    if (this.showToolsBar) {
                        this.heightToolsBar = "height:auto"
                        this.iconToolsBar = 'iconfont icon-d-arrow-up'
                    } else {
                        this.heightToolsBar = "height:60px"
                        this.iconToolsBar = 'iconfont icon-d-arrow-down'
                    }
                },
                //多选删除
                deleteCheckAll: function () {
                    let _parent = this; //父页面
                    let _this = this; //当前页面
                    //判断是否有父窗体
                    if (typeof (parent.vm) != "undefined") {
                        _parent = parent.vm;
                    }
                    //拿到选中的数据
                    let delIds = [];
                    _this.listData.forEach(row => {
                        if (row.checked) {
                            delIds.push(row.id);
                        }
                    });
                    //检查是否有选中
                    if (delIds.length <= 0) {
                        _this.$message({ type: 'warning', message: '请选择要删除的记录！' });
                        return false;
                    }
                    //执行删除操作
                    _parent.$confirm('确认要删除该记录吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(function () {
                        AxiosAjax({
                            method: 'delete',
                            url: `/article/${_this.channelId}?ids=${delIds.toString()}`,
                            loading: true,
                            successMsg: '已删除成功',
                            success: function (res) {
                                _this.getPageList(); //重新加载列表
                                //清除选中状态
                                _this.$refs.multipleTable.clearSelection();
                            }
                        })
                    }).catch(function () { });
                },
                //单项删除
                deleteItem: function (val) {
                    let _parent = this; //父页面
                    let _this = this; //当前页面
                    //判断是否有父窗体
                    if (typeof (parent.vm) != "undefined") {
                        _parent = parent.vm;
                    }
                    //执行删除操作
                    _parent.$confirm('确认要删除该记录吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(function () {
                        AxiosAjax({
                            method: 'delete',
                            url: `/article/${_this.channelId}/${val}`,
                            loading: true,
                            successMsg: '已删除成功',
                            success: function (res) {
                                _this.getPageList(); //重新加载列表
                            }
                        });

                    }).catch(function () { });
                },
                //选中第几行
                handleSelectionChange: function (val) {
                    this.multipleSelection = val;
                },
                //每页显示数量
                handleSizeChange: function (val) {
                    if (this.pageSize != val) {
                        this.pageSize = val;
                        this.getPageList(); //加载数据
                    }
                },
                //跳转到第几页
                handleCurrentChange: function (val) {
                    if (this.pageIndex != val) {
                        this.pageIndex = val;
                        this.getPageList(); //加载数据
                    }
                },
                //日期范围选择事件
                handleChange(val) {
                    //console.log(val);
                },
                //切换图文列表方式
                toggleImgList: function () {
                    let _this = this;
                    _this.showImgList = !_this.showImgList
                    if (_this.showImgList) {
                        _this.iconImgList = 'iconfont icon-list-txt';
                        //debugger;
                        
                    } else {
                        _this.iconImgList = 'iconfont icon-list-img';
                        //取消选择
                        _this.$refs.multipleTable.clearSelection();
                        _this.listData.forEach(row => {
                            //是表格列表的时候
                            if (row.checked) {
                                _this.$refs.multipleTable.toggleRowSelection(row);
                            }
                        });
                    }
                },
                //全选切换
                toggleCheckAll: function () {
                    let _this = this; //当前页面
                    if (_this.listData.length>0) {
                        _this.listData.forEach(function (item, index) {
                            if (!_this.checkAll) {
                                item.checked = true;
                                //文字列表
                                _this.$refs.multipleTable.toggleRowSelection(item);
                            } else {
                                item.checked = false;
                                //文字列表
                                _this.$refs.multipleTable.clearSelection();
                            }
                        });
                    }
                    _this.checkAll = !_this.checkAll
                },
                //表格全选
                handleSelectAll(selection) {

                    let _this = this;
                    if (selection.length > 0) {
                        selection.forEach(row => {
                            row.checked = true;
                        });
                    } else {
                        _this.listData.forEach(row => {
                            row.checked = false;
                        });
                    }
                },
                //单独选中1行
                handleSelect(selection, row) {
                    let _this = this;
                    if (selection.length > 0) {
                        row.checked = true;
                    } else {
                        row.checked = false;
                    }
                },
                //批量审核
                auditCheckAll: function () {
                    let _parent = this; //父页面
                    let _this = this; //当前页面
                    //判断是否有父窗体
                    if (typeof (parent.vm) != "undefined") {
                        _parent = parent.vm;
                    }
                    //获取选中值
                    let checkIds = [];//创建一个数组
                    if (_this.listData.length>0) {
                        _this.listData.forEach((item, index) => {
                            if (item.checked) {
                                checkIds.push(item.id);
                            }
                        });
                    }
                    //检查是否有选中
                    if (checkIds.length == 0) {
                        _this.$message({
                            message: '请选择要审核的记录！',
                            type: 'warning'
                        });
                        return false;
                    }
                    //执行删除操作
                    _parent.$confirm('确认批量审核记录吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(function () {
                        AxiosAjax({
                            method: 'put',
                            url: '/article/' + _this.channelId+'?ids=' + checkIds.toString(),
                            loading: true,
                            successMsg: '批量审核完成',
                            success: function (res) {
                                _this.initData(); //重新加载列表
                            }
                        });
                    }).catch(function () { });
                },
            },
            created: function () {
                let _this = this; //当前页面
                //加载频道列表
                _this.initData();

            },
        })
    </script>
</body>
</html>